<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <script type="javascript" src="js/jquery-1.11.3.js"></script>
    <script type="javascript" src="js/bootstrap.js"></script>
    <title>登陆</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a:hover{text-decoration: none;color: #ffffff;}
        #bg {
            position: fixed;
            width: 100%;
            height: 100%;
        }
        .box {
            width: 100%;
            height: 100%;
        }
        .box>div {
            background: rgba(0,0,0,.5);
            position: absolute;
            width: 50%;
            height: 45%;
            top: 50%;
            left: 50%;
            margin-left: -25%;
            margin-top: -15%;
        }
        .left {
            width: 65%;
            border-right: 1px solid #CCCCCC;
            height: 100%;
            float: left;

        }

        .left>h4 {
            color: #FFFFFF;
            line-height: 2em;

        }
        .left>form>div>label {
            color: #FFFFFF;
            font-size: 1.1em;
        }
        .left>form>div>input {
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            width: 100%;
        }
        .left>form>div {
            padding-top: 5%;
            margin-left: 10%;
            margin-right: 10%;
        }
        .form-horizontal .form-group {
            margin-right: 0;
        }
        span > a:hover{color: #d58512;}
        /**/
        .right>h4 {
            color: #FFFFFF;
            line-height: 3.3em;
            margin-top: 1em;
        }
        .right>p>a {
            background: url("images/login.png") no-repeat center left;
            display: block;
            width: 153px;height: 50px;;
            color: #FFFFFF;
            font-size: 1em;
            margin-left: 70%;
            padding-left: 10%;
            line-height: 300%;
        }

        .right>p>a.c1{background-position:0 0; }
        .right>p>a.c2{background-position:0 -60px; }
        .right>p>a.c3{background-position:0 -120px; }
        .form-control{width:85%;}
        .btn_big1{padding: 1em;color: #ffffff;background: #d58512;border: 0;border-radius: 6px;}
    </style>
</head>
<body>
<img src="images/0.webp" alt=""id="bg"/>
<div class="box">
   <div>
        <div class="left">
            <h4 class="text-center">欢迎登陆</h4>
            <form class="form-horizontal" method="post" >
                <div class="form-group">
                    <label for="username" class="col-sm-3 control-label">账号</label>
                    <div class="col-sm-9">
                        <input type="text" name="username" class="form-control" id="username" placeholder="Email/tel">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-3 control-label">密码</label>
                    <div class="col-sm-9">
                        <input type="password" name="password" class="form-control" id="password" placeholder="Password">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label style="color: #ffffff;">
                                <input type="checkbox" value="1" name="check">记住账号
                            </label>
                            <a href="忘记密码.html" style="float: right;margin-right:13%;">忘记密码？</a>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="" style="width: 75%;margin: 0 auto;">
                        <input type="button" value="立即登录" class="btn_big1 btn-block" onclick="checkForm()" />
                        <input type="hidden" name="referurl" id="referurl" value="{$referurl}">
                    </div>
                </div>
            </form>
        </div>
        <div class="right">
            <h4 class="text-center">第三方登录</h4>
            <p><a href="" class="c1">QQ登陆</a></p>
            <p><a  href="" target="_blank" title="weixin"  class="c2">微信登陆</a></p>
            <p><a href=""  class="c3">手机登录</a></p>
           <p> <div style="text-align:center;color:#ffffff;">没有账号，<a href="注册.html" style="color:#d58512; ">立即注册</a></div></p>
        </div>
   </div>
</div>
   <script type="text/javascript">
       function checkForm(){
           console.log(123);
           var form=document.forms[0];
           console.log(form);
           var uname=form.username.value;
           var pass=form.password.value;
           var check=form.check.value;

           var error = '';
           if(uname == ''){
               form.username.placeholder="";
               form.username.placeholder += '账号不能为空';
               return false;
           }
           if (!checkMobile(uname) && !checkEmail(uname)) {
               alert("账号格式不匹配!");
               return false;
           }
           if(pass == ''){
               form.password.placeholder="";
               form.password.placeholder += '密码不能为空';
               return false;
           }
           if(error){
               layer.open({content:error,time:2});
               return false;
           }

          form.submit();
          window.location.href = "首页.html"; 
       }
            function checkMobile(tel) {
                var reg = /(^1[3|4|5|7|8][0-9]{9}$)/;
                if (reg.test(tel)) {
                    return true;
                }else{
                    return false;
                };
            }
            function checkEmail(str){
                var reg = /^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                if(reg.test(str)){
                    return true;
                }else{
                    return false;
                }
            }
            function showErrorMsg(msg){
                //$('.msg-err').show();
                //$('.J-errorMsg').html(msg);
                layer.open({content:msg,time:2});
            }
</script>

</body>
</html>